<template>
  <el-dialog
    custom-class="transfer-sfc-order"
    v-el-drag-dialog="{ drag: true, full: false, resize: false }"
    :title="title"
    :close-on-click-modal="false"
    :visible="true"
    @close="closeMd"
    :width="'400px'">
    <el-form 
      :model="fm.ps" 
      :ref="fm.fname" 
      :label-width="'100px'"
      @keyup.enter.native="onSubmit">
      <el-form-item
        label="行李个数"
        prop="travelBox"
        :rules="[ this.$rules.isPosInt('行李个数格式错误') ]">
        <el-input
          maxlength="5"
          v-model="fm.ps.travelBox"
          placeholder="请输入行李个数">
          <b slot="suffix" class="c-333">个</b>
        </el-input>
      </el-form-item>

      <el-form-item
        label="感谢费"
        prop="thanksFee"
        :rules="[ this.$rules.isPosInt('感谢费格式错误') ]">
        <el-input
          maxlength="5"
          v-model="fm.ps.thanksFee"
          placeholder="请输入感谢费">
          <b slot="suffix" class="c-333">元</b>
        </el-input>
      </el-form-item>

      <el-form-item
        label="支付方式"
        prop="payWay"
        :rules="[{ required: true, message: '支付方式不能为空', trigger: 'change' }]">
        <el-select
          v-model="fm.ps.payWay"
          style="width: 100%"
          placeholder="请选择支付方式">
          <el-option
            v-for="(it, i) in payWayOptions"
            :key="i"
            :label="it.label"
            :value="it.value">
          </el-option>
        </el-select>
      </el-form-item>

      <el-form-item
        label="备注"
        prop="remark"
        :rules="[
          { min: 1, max: 200, message: '备注长度最多为200个字符串', trigger: 'blur' }
        ]">
        <el-input
          type="textarea"
          :autosize="{ minRows: 5, maxRows: 4}"
          placeholder="请输入备注(200字内)"
          maxlength="200"
          show-word-limit
          v-model="fm.ps.remark">
        </el-input>
      </el-form-item>

      <el-form-item>
        <el-button 
          type="primary" 
          @click="onSubmit" 
          :loading="fm.sb.load">
          {{fm.sb.text}}
        </el-button>

        <el-button @click="closeMd">关闭</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>
</template>

<script>
import elDragDialog from "@/directive/el-drag-dialog";

import * as orderSer from "@/api/services/order.service";

export default {
  name: "TransferSfcOrder",
  directives: { elDragDialog },
  props: {myData: Object},
  data() {
    return {
      title: '转顺风车订单',
      fm: {
        fname: "transferSfcOrderFm",
        sb: {load: false, text: '确定'},
        ps: {
          // 子订单编号
          orderNum: this.myData.obj.orderNum??'',
          // 行李箱个数 eg:3
          travelBox: null,
          // 感谢费 eg:30
          thanksFee: null,
          // 备注 eg:测试
          remark: null,
          // 支付方式 eg:余额支付【BALANCE_PAY】平台垫支【JZ_PAY】
          payWay: null,
        },
      },

      // 支付方式
      payWayOptions: [
        {label: '余额支付', value: 'BALANCE_PAY'},
        {label: '平台垫支', value: 'JZ_PAY'},
      ]

    };
  },
  created() {
    this.init();
  },
  methods: {
    /* 关闭弹框 */
    closeMd() {
      this.$emit("myClick", {state: false});
    },
    // 准备数据
    init() {
      let that = this;

      let o = that.myData.obj;
      if(o){// 回填修改数据
        // 设置-子订单编号
        that.fm.ps.orderNum = o.orderNum??'';
      }
    },

    /**
     * 提交表单
     */
    onSubmit() {
      let that = this, U = that.U, fm = that.fm, sb = fm.sb, ps = U.scopy(fm.ps);
      
      that.$refs[fm.fname].validate((valid) => {
        if (!valid) { return false; } else {
          sb.load = true;

          orderSer.childToFreeOrder(ps).then((res) => {
            sb.load = false;

            if (res.code !== 1) {
              U.qerror(res.msg);
            } else {
              U.qsuccess(res.msg);

              that.closeMd();
              // 调用父组件方法-重新加载数据
              that.$emit("reloadDg");
            }
          });

          setTimeout(() => { sb.load = false; }, 10000);
        }
      });
    },

  },
};
</script>